<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CreatShare</title>
	<meta name="description" content="creatshare的官方网站">
	<meta name="keywords" content="畅校园图书馆，西邮导航，畅校园微信公众平台，百盘">
	<link rel="stylesheet" href="css/main.css">
	<link rel="icon"  type="image/png" href="img/createShare.jpg">
	<script>
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "//hm.baidu.com/hm.js?30584b46b565c7be8ab223879c17b7df";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
	</script>
</head>
<body> 
	<div class="content">
		<div class="list">
				<div class="home">	
				<div class="icon">
					<figure>
						<a href="#" class="to-pro"><img class="pro" src="img/pro.png" alt="产品"></a>
						<p>产品</p>
					</figure>
					<figure>
						<a href="#" class="to-blog"><img src="img/blog.png" alt="博客"></a>
						<p>博文分享</p>
					</figure>
					<figure>
						<a href="#" class="to-par"><img src="img/par.png" alt="小伙伴"></a>
						<p>小伙伴</p>
					</figure>
					<figure>
						<a href="#" class="to-fq"><img src="img/fq.png" alt="常见问题"></a>
						<p>F&Q</p>
					</figure>
					<figure>
						<a href="#" class="to-follow"><img src="img/follow.png" class="addtop" alt="关注我们"></a> 
						<p>关注我们</p>
					</figure>
				</div>
			</div>

			<div class="product" >
				<div class="nav">
					<img class="png0" src="img/back.png">

					<a href="#" class="to-pro"><img class="png1 png" id="targetLink1" src="img/11.png"><p>产品</p></a>


					<a href="#" class="to-blog"><img class="png2 png" src="img/11.png"><p>博文分享</p></a>

					<a href="#" class="to-par"><img class="png3 png" src="img/11.png"><p>小伙伴</p></a>

					<a href="#" class="to-fq"><img class="png4 png" src="img/11.png"><p>F&Q</p></a>

					<a href="#" class="to-follow" ><img class="png5 png" src="img/11.png"><p>关注我们</p></a>

				</div>
				<div class="show">
					<div class="line1">
						<div class="library">
							<div class="box1">
								<img src="img/lib.png">
							</div>
							<div class="box2">
								<h3><a target="_blank" href="http://lib.changxiaoyuan.com/">畅校园图书馆</a></h3>
								<div class="introduction">
									<p class="intr">你身边的网上图书馆</p>
									<p class="newIntr">图书查询,邮件催还,自动续借,将图书馆装进口袋</p>
								</div>
							</div>
						</div>
						<div class="xiyouNav">
							<div class="box1">
								<img src="img/nav.png">
							</div>
							<div class="box2">
								<h3><a target="_blank" href="http://hao.changxiaoyuan.com/">西邮导航</a></h3>
								<div class="introduction">
									<p class="intr">享你所想，导你所需</p>
									<p class="newIntr">院系官网,社团主页,官方微博,全尽收录</p>
								</div>
							</div>
						</div>
						<div class="platform">
							<div class="box1">
								<img src="img/plat.png">
							</div>
							<div class="box2">
								<h3>畅校园微信公众平台</h3>
								<div class="introduction">
									<p class="intr">最懂你的微信平台</p>
									<p class="newIntr">科技新闻,干货满满,小畅大事件,一个不放过</p>
								</div>
							</div>
						</div>
					</div>
					<div class="line2">
						<div class="bP">
							<div class="box1">
								<img src="img/bp.png">
							</div>
							<div class="box2">
								<h3><a target="_blank" href="http://baipan.changxiaoyuan.com/">百盘</a></h3>
								<div class="introduction">
									<p class="intr">化烦为简，畅享云端</p>
									<p class="newIntr">安全无毒,绝对隐私,西邮人自己的资料存储空间</p>
								</div>
							</div>
						</div>
						<div class="hatch">
							<div class="box1">
								<img src="img/hatch.png">
							</div>
							<div class="box2">
								<h3>孵化中</h3>
								<p>敬请期待</p>
							</div>
						</div>
						<!-- 这是一个占位符，因为用flex布局了，否则就成两边了 -->
						<div class="hack">
							<div class="box1">
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="blog" >
				<div class="nav">
					<img class="png0" src="img/back.png">

					<a href="#" class="to-pro"><img class="png1 png" src="img/11.png"><p>产品</p></a>


					<a href="#" class="to-blog"><img class="png2 png" id="targetLink2" src="img/11.png"><p>博文分享</p></a>

					<a href="#" class="to-par"><img class="png3 png" src="img/11.png"><p>小伙伴</p></a>

					<a href="#" class="to-fq"><img class="png4 png" src="img/11.png"><p>F&Q</p></a>

					<a href="#" class="to-follow" ><img class="png5 png" src="img/11.png"><p>关注我们</p></a>	
				</div>
				<div class="blog-content">
					<div class="blog-line">
						<div class="essay">
							<div class="classify">
								<h3><a target="_blank" href="#" >把东西都压成扁平的！</a></h3>
								<div class="classify-msg">
									<span>设计</span>
								   <time>2015.04.11</time>
								</div>
							</div>
							<p>前不久开始兴起了扁平化这种设计风格，这种风格以其简洁美观的表现方式被大众所认可。这种流行趋势尚在持续，还没有见到衰退的迹象。这可能也象征并体现了现代人所追崇的一种生活方式吧。</p>
						</div>
						<div class="essay">
							<div class="classify">
								<h3><a target="_blank" href="#">用户体验中巧妙的过场动画</a></h3>
								<div class="classify-msg">
									<span>设计</span>
									<time>2015.04.11</time>
								</div>
							</div>
							<p>一些网站比其它网站做得更好，不论是他们的内容，适用性，(还是)设计，特性，等等(方面)。在交互设计和动画这两方面的细节上，使现代网络产生了基本的变化。我们将会分享一些课程，从多样的模型和分析上（解释)为什么这些简单的模此）好的结果。</p>
						</div>
					</div>
					<div class="blog-line">
						<div class="essay">
							<div class="classify">
								<h3><a target="_blank" href="#">我们从那么多的app中学到了什么？</a></h3>
								<div class="classify-msg">
									<span>产品</span>
									<time>2015.04.8</time>
								</div>
							</div>
							<p>文章灵感来源于一个好玩的事情：对于一款新的智能手机，小孩子的掌握速度远远比老人们快。对于经历过很多事情的老人们来说，很多固有的“模式”，在某些时刻反而会成为一种阻碍，也许对于布满了按钮的收音机，或者复杂的装置，他们能熟练的使用，但是对于同样一款“新鲜的”工具，却比不上小孩子。从某种程度上来说，用户体验的提升对于老人们来说反而是一种习惯的束缚。比如说：苹果手机的解锁界面，任何一个小孩子看了，都可以完成：向右滑动以解锁这个动作（在看不懂文字的情况下）。而对一部分大人来说则需要阅读文字了。早前我并不知道这个设置妙处所在，因为它太过“自然”了，所以被我想当然的忽略掉了。而正是这种忽略，则是苹果对于用户使用习惯的研究与贯彻：一切使用习惯都应是用户本身的行为习惯，而不需要后天“习得”。那么回到题目：我们从那么多的app中学到了什么？</p>
						</div>
						<div class="essay">
							<div class="classify">
								<h3><a target="_blank" href="#">网络设计，事关你我</a></h3>
								<div class="classify-msg">
									<span>产品</span>
									<time>2015.04.6</time>
								</div>
							</div>
							<p>当我说“设计”这个词的时候，你会想到什么？你可能会这样想，它们会是一些便于携带的精美手工，或者一些LOGO，海报，地图等这类从视觉上可以进行自我解释的东西，这类经得起时间考验的图标设计。</p>
						</div>
					</div>
					<div class="blog-line">
						<div class="essay">
							<div class="classify">
								<h3><a target="_blank" href="#">把东西都压成扁平的！</a></h3>
								<div class="classify-msg">
									<span>设计</span>
									<time>2015.04.11</time>
								</div>
							</div>
							<p>前不久开始兴起了扁平化这种设计风格，这种风格以其简洁美观的表现方式被大众所认可。这种流行趋势尚在持续，还没有见到衰退的迹象。这可能也象征并体现了现代人所追崇的一种生活方式吧。</p>
						</div>
						<div class="essay">
							<div class="classify">
								<h3><a  target="_blank" href="#">初探Vue.js</a></h3>
								<div class="classify-msg">
									<span>web前端开发</span>
									<time>2015.6.10</time>
								</div>
							</div>
							<p>这是西邮导航上的一个模块，目的要实现各个搜索引擎之间的切换，用Vue.js实现起来so easy!</p>
						</div>
					</div>
				</div>
				<div class="change">
					<img id="change" src="img/change.png">
					<span>换一批</span>
				</div>
			</div>

			<div class="partner">
				<div class="nav">
					<img class="png0" src="img/back.png">

					<a href="#" class="to-pro"><img class="png1 png" src="img/11.png"><p>产品</p></a>


					<a href="#" class="to-blog"><img class="png2 png" src="img/11.png"><p>博文分享</p></a>

					<a href="#" class="to-par"><img class="png3 png" id="targetLink3" src="img/11.png"><p>小伙伴</p></a>

					<a href="#" class="to-fq"><img class="png4 png" src="img/11.png"><p>F&Q</p></a>

					<a href="#" class="to-follow" ><img class="png5 png" src="img/11.png"><p>关注我们</p></a>
				</div>

				<div class="barrage">
					<div class="man-box">
						<img src="img/头像/徐.png">
					</div>
					<div class="man-box">
						<img src="img/头像/王.png">
					</div>
					<div class="man-box">
						<img src="img/头像/简.png">
					</div>
					<div class="man-box">
						<img src="img/头像/苌.png">
					</div>
					<div class="man-box">
						<img src="img/头像/苏.png">
					</div>
					<div class="man-box">
						<img src="img/头像/薛.png">
					</div>
					<div class="man-box">
						<img src="img/头像/许.png">
					</div>
					<div class="man-box">
						<img src="img/头像/豆.png">
					</div>
					<div class="man-box">
						<img src="img/头像/路.png">
					</div>
					<div class="man-box">
						<img src="img/头像/陈.png">
					</div>
					<div class="man-box">
						<img src="img/头像/韩.png">
					</div>
				</div>
			</div>

			<div class="questions" >
				<div class="nav">
					<img class="png0" src="img/back.png">

					<a href="#" class="to-pro"><img class="png1 png" src="img/11.png"><p>产品</p></a>


					<a href="#" class="to-blog"><img class="png2 png" src="img/11.png"><p>博文分享</p></a>

					<a href="#" class="to-par"><img class="png3 png" src="img/11.png"><p>小伙伴</p></a>

					<a href="#" class="to-fq"><img class="png4 png" id="targetLink4" src="img/11.png"><p>F&Q</p></a>

					<a href="#" class="to-follow" ><img class="png5 png" src="img/11.png"><p>关注我们</p></a>
					
				</div>
				<div class="explain">
					<div class="sub-explain">
						<h3>Creatshare和畅校园到底是什么关系?</h3>
						<span>畅校园是Creatshare互联网实验室成立的一个子品牌，专注于开发立足高校，服务师生群体的互联网产品或服务</span>
					</div>

					<div  class="sub-explain">
						<h3>小畅是谁?</h3>
						<span>小畅从“畅校园”而来，起初只是畅校园微博小编的昵称，随着其他产品的增加，“小畅”也慢慢变为一个代号，凡是帮助用户使我们产品的同学都可以化身为“小畅”，你也可以是哦-</span>
					</div>

					<div  class="sub-explain">
						<h3>在Createshare会收获到什么?</h3>
						<span>与技术大神一起亲手孕育互联网产品的机会，将课本中的知识加以实践。24小时零食WIFI不间断舒适的工作环境，知名互联网公司内推名额等等......这些都不重要,重要的是能认识到志同道合的朋友，大家相互见证一起成长！</span>
					</div>

					<div  class="sub-explain">
						<h3>怎样加入我们?</h3>
						<span>可以关注我们的SNS平台(微博、微信)获取我们的宣讲会、纳新信息。如果你认识实验室的成员，也可以请他们帮你内部推荐呐~死等你来！</span>
					</div>
				</div>
			</div>

			<div class="follow" >
				<div class="nav">
					<img class="png0" src="img/back.png">

					<a href="#" class="to-pro"><img class="png1 png" src="img/11.png"><p>产品</p></a>


					<a href="#" class="to-blog"><img class="png2 png" src="img/11.png"><p>博文分享</p></a>

					<a href="#" class="to-par"><img class="png3 png" src="img/11.png"><p>小伙伴</p></a>

					<a href="#" class="to-fq"><img class="png4 png" src="img/11.png"><p>F&Q</p></a>

					<a href="#" class="to-follow" ><img class="png5 png" id="targetLink5" src="img/11.png"><p>关注我们</p></a>
					
				</div>
				<div class="link">
					<figure class="weixin">
						<div>
							<a href="#"><img src="img/weixin.png"></a>
						</div>
						<p>畅校园微信</p>
						<img id="twocode" src="img/twocode.png">
					</figure>
					
					<figure class="weibo">
						<div>
							<a target="_blank" href="http://weibo.com/creatshare"><img src="img/weibo.png">
							</a>
						</div>
						<p>CreateShare微博</p>
					</figure>

					<figure class="github">
						<div>
							<a target="_blank" href="https://github.com/creatshare"><img src="img/github.png"></a>
						</div>
						<p>Github</p>
					</figure>

					<figure class="renren">
						<div>
							<a target="_blank" href="http://page.renren.com/601422767"><img src="img/renren.png"></a>
						</div>
						<p>Creatshare人人</p>
					</figure>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/util.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/product.js"></script>
	<script type="text/javascript" src="js/iconSwitch.js"></script>	
	<script type="text/javascript" src="js/request.js"></script>
</body>
</html>